
<template>
    <div style="display: flex" class="tempxyz menmuStyle">
        <CCard class="rightCard">
            <CCardHeader class="header-wraper">
                <div class="header-left-titleWraper">
                    <span class="textTitle">服务监控</span>
                </div>
                <div class="header-right-wraper">
                    <Input v-model="name" placeholder="请输入关键字" style="width: 200px" class="headerMar" />
                    <Button type="primary"  @click="searchList" class="system-btn-style headerMar" style="margin-right: 10px">
                        <Icon type="ios-search" />&nbsp;查询
                    </Button>
                </div>
            </CCardHeader>
            <CCardBody class="card-body">
                <div style="height: calc(100% - 46px)">
                    <TableList ref="table" :getColumn="getColumns" :getAxios="getAxios"  >

                        <template v-slot:type="item">
                            {{item.data.row.clusterServiceType.description}}
                        </template>
                        <template v-slot:show_details="item">
                            <CButton
                                    title="编辑"
                                    variant="outline"
                                    class="textBtnStyle onButton system-btn-style"
                                    @click="transcriptListPush(item.data.row)"
                            >查看</CButton>

                        </template>
                        <template v-slot:isRelease="item">
                            <Button
                                    v-if="item.data.row.serviceStatus === 'Running'"
                                    type="primary"
                                    shape="circle"
                                    size="small"
                            ><Icon type="md-checkmark"
                            /></Button>
                            <Button  v-if="item.data.row.serviceStatus === 'Warning'" type="warning" shape="circle" size="small"
                            ><i class="fa fa-exclamation" aria-hidden="true" style="width:15px"></i></Button>
                            
                             <Button v-if="item.data.row.serviceStatus === 'Error'" type="error" shape="circle" size="small"
                            ><Icon type="md-close"
                            /></Button>                        
                        </template>
                    </TableList>
                </div>
            </CCardBody>
        </CCard>
    </div>
</template>

<script>

    import TableList from "@/template/table/TableList";

    export default {
        name: "resourceManagement",
        components: { TableList },
        data() {
            return {
                name: "",

                getColumns: [
                    {
                        title: "服务名称",
                        key: "serviceName",
                        className: "centerText",
                    },

                    {
                        title: "服务类型",
                        key: "type",
                        className: "centerText",
                        align:"center",
                        slot: "type",
                    },
                    {
                        title: "服务描述",
                        key: "description",
                        className: "centerText",
                    },
                    {
                        title: "服务状态",
                        key: "isRelease",
                        slot: "isRelease",
                        align:"center",
                        width: "120",
                    },

                    {
                        key: "show_details",
                        slot: "show_details",
                        title: "操作",
                        align:"center",
                        width: "180",
                    },
                ],
                getAxios: {
                    url: this.$api.monitorApi.getServiceLis, //请求路径
                    method: "get", //请求方式
                    dataList: {}, //请求参数
                },
            };
        },


        methods: {
            searchList() {
                this.$refs.table.getRefreshTable({name:this.name},);
            },


            transcriptListPush (row) {

                // 判断进入哪个详情页面
                let query = {
                    id: row.id,
                    serviceType: row.clusterServiceType.description
                };
                this.$router.push({
                    path: "/monitor/serverManage/serviceManageDetial",
                    query
                });
            },


        },

    };
</script>

<style scoped>
    .rightCard {
        width: 80%;
        flex: 1;
    }

    .leftCard {
        width: 18%;
    }
    /deep/.card {
        margin-bottom: 0;
    }
    .headerMar{
        margin-left: 10px;

    }

</style>
